<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>登录</title>
	<style>
		*{
			margin:0;
			padding: 0;
			list-style: none;
			position: relative;
			width: 100%;
			height: 100%;
		}
		#container{

		}
		#top{
			height: 66px;
			background: #eff4fa;
			box-shadow: 0px 1px 10px 0px #aaa;
		}
		#top > img{
			width: 182px;
			height: 35px;
			position: absolute;
			top: 17px;
			left: 30px;
		}
		#top > span{
			font-size: 1.5em;
	    	font-weight: bold;
	    	text-align: center;
	    	line-height: 66px;
	    	left: 10%;
	    	cursor: pointer;
		}
		#top > span:hover{
			text-decoration: underline;
		}
		#middle{
			height: 835px;
			background: #fff;
		}
		#picture{
			/*width: 1250px;*/
			/*height: 836px;*/
			width: 60%;
			height: 80%;
			background: yellow;
			position: absolute;
			left: 5%;
			top: 5%;
		}
		#login_div{
			width: 334px;
			height: 390px;
			/*background: blue;*/
			position: absolute;
			right: 13%;
			top: 18%;
			border: 1px solid #ccc;
			box-shadow: 0px 0px 15px 0px #aaa;
			background: #f9fbfe;
		}
		#login_div > form{
			padding: 19px;
			padding-top: 85px;
		}
		.ipt_item{
			width: 80%;
			height: 40px;
			margin:10px 16px;
		}
		.checkbox{
			width: 20px;
			height: 20px;
		}
		.btn-primary{
			background: #2d9fe2;
			border: 1px solid #2d9fe2;
			cursor: pointer;
			/*box-shadow: 1px 1px 10px 0px #2d9fe2;*/
			font-size: 1em;
			font-weight: bold;
			color: #fff;
		}
/*		#footer{
			height: 37px;
			background: #eff4fa;
			position: absolute;
			bottom: 0;
			box-shadow: 0px -1px 10px 0px #aaa;
		}*/
	</style>
</head>
<body>
	<div id="container">
		<div id="top">
<!-- 			<img src="https://rescdn.qqmail.com/zh_CN/htmledition/images/webp/logo/qqmail/qqmail_logo_default_35h206ff1.png" alt=""> -->
			<span id="title">酷睿影评·后台登录</span>
		</div>
		<div id="middle">
			<div id="picture">
				<img src="a.jpg" alt="">
			</div>
			<div id="login_div">
				<form action="#" id="login_form">
					<input name="username" class="ipt_item" type="text" placeholder="用户名" style="width: 75%;padding-left:14px;">
					<input name="password" class="ipt_item" type="password" placeholder="密码" style="width: 75%;padding-left:14px;"><br>
					<input class="checkbox ipt_item" type="checkbox">下次自动登录
					<input class="ipt_item btn-primary" type="button" value="登  录" onclick="login('login_form')">
				</form>
			</div>
		</div>
		<div id="footer"></div>
	</div>

	<script>
		function login(id) {
			var fom = document.getElementById(id);
			var formData = new FormData(fom);
			var rep = {};
			fetch('/CoolReal/valid', {
				credentials: 'include',
  				method: 'POST',
 				body:encodeURI(Array.from(formData.entries()).map(el=>el.join('=')).join('&')),
				headers:{
					"Content-type":"application/x-www-form-urlencoded;charset=utf-8"
				}
			})
			.then(response => response.json())
			.catch(error => console.error('Error:', error))
			.then(response => {
				console.log('Success:', response);
				if(response.status == 1){
					sessionStorage.setItem('currentUser',JSON.stringify(response.data));
					window.location.href="admin.html";
				}else{
					alert(response.message);
				}
				return response;
			});

			// response => console.log('Success:', response);
			// function(response){
			// 	console.log('Success:', response);
			// }
		}
	</script>
</body>
</html>